HTMLify

html {
    box-sizing: border-box;
}

*,
*:after,
*:before {
    box-sizing: inherit;
}

body {
    background: #2bc8dd;
    height: 100vh;
    display: grid;
    place-content: center;
}

.tabs {
    --background: #ffffff;
    --light-grey: #c6cfd9;
    --wave-color: #2ac8dd;
    --width: 300px;
    --height: 75px;
    --border-radius: var(--height);
    background: var(--background);
    width: var(--width);
    height: var(--height);
    position: relative;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 15px;
}

.tabs label {
    width: 26px;
    height: 26px;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transform-origin: center bottom;
}

.tabs label::before {
    content: "";
    height: 4px;
    width: 4px;
    border-radius: 0% 100% 50% 50%/0% 50% 50% 100%;
    transform: scale(1, 1) rotate(45deg);
    transform-origin: 50% 50%;
    background: var(--wave-color);
    display: block;
    position: absolute;
    top: -30px;
}

.tabs label svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.tabs label svg .icon {
    fill: none;
    stroke: var(--light-grey);
    stroke-dashoffset: 98;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.15s linear 0.3s;
}

.tabs label .wave {
    height: 26px;
    width: 26px;
    position: absolute;
    overflow: hidden;
}

.tabs label .wave::before,
.tabs label .wave::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    right: 0;
    background-repeat: repeat;
    height: 14px;
    width: 48px;
    background-size: 12px 12px;
    animation: wave-animation 3s linear infinite;
    transition: bottom 0.15s ease-out 0.35s;
}

.tabs label .wave::before {
    background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
    animation-duration: 2s;
    opacity: 0.5;
}

.tabs label .wave::after {
    background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
    animation-duration: 3s;
}

.tabs label:nth-of-type(1) .wave {
    clip-path: url(#path-icon-01);
}

.tabs label:nth-of-type(2) .wave {
    clip-path: url(#path-icon-02);
}

.tabs label:nth-of-type(3) .wave {
    clip-path: url(#path-icon-03);
}

.tabs label:nth-of-type(4) .wave {
    clip-path: url(#path-icon-04);
}

.tabs input {
    display: none;
}

.tabs input:checked+label {
    animation: wiggle-animation 1s ease 0.3s;
}

.tabs input:checked+label::before {
    animation: drop-animation 0.35s ease-in both;
}

.tabs input:checked+label svg .icon {
    stroke: #4b4b4b;
}

.tabs input:checked+label .wave:before {
    bottom: 0;
}

.tabs input:checked+label .wave:after {
    bottom: -4px;
}

@keyframes wiggle-animation {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-7deg);
    }

    60% {
        transform: rotate(7deg);
    }

    90% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes wave-animation {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes drop-animation {
    70% {
        transform: scale(0.8, 3) rotate(45deg);
        top: -7px;
    }

    100% {
        transform: scale(1.5, 0.5) rotate(45deg);
        top: 19px;
    }
}